import React from 'react'
import { withRouter } from 'react-router-dom'
import { Layout, Dropdown, Menu, Avatar, message } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'

function TopHead(props) {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  // 从localStorage获取当前登录用户信息
  const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))

  /*
  // 定义左侧菜单收起打开，加入redux后不需要了
  const [collapsed, setCollapsed] = useState(false)
  */

  // 下拉菜单
  const menu = (
    <Menu>
      <Menu.Item key='用户等级'>{roleName}</Menu.Item>
      <Menu.Item danger key='退出' onClick={() => loginOut()}>退出</Menu.Item>
    </Menu>
  );
  /*--------------------------------------------------定义方法-------------------------------------------------------------*/
  /*--------------------------------------------------定义方法-------------------------------------------------------------*/
  /*--------------------------------------------------定义方法-------------------------------------------------------------*/
  /*--------------------------------------------------定义方法-------------------------------------------------------------*/
  // 退出
  const loginOut = () => {
    localStorage.removeItem("token")
    props.history.replace("/login")
    message.success({
      content: '退出成功 ',
    });
  }
  // 改变展开/收起
  const changeCollapsed = () => {
    // setCollapsed(!collapsed)
    // 1.加入redux管理后可以直接修改如下
    // store.dispatch({ type: 'CHANGE_COLLAPSED' })
    // 2.使用react-redux的connect方法如下使用mapDispatchToProps传入的方法
    props.change_collapsed()
  }
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  return (
    <Layout.Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {
        // collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
        // 加入redux管理后修改如下
        props.isCllooapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
      }
      <div style={{ float: 'right' }}>
        <span>欢迎<span style={{ color: "#1890ff" }}>{username}</span>回来</span>
        <Dropdown overlay={menu}>
          {/* <Avatar shape="square" size="large" icon={<UserOutlined />} /> */}
          <img src='https://joeschmoe.io/api/v1/random' alt='' style={{width: '38px',verticalAlign: 'middle',border: '1px solid #999',borderRadius: '100%'}} />
        </Dropdown>
      </div>
    </Layout.Header>
  )
}



const mapStateToProps = (state) => {
  // state是通过sore传过来reduce的初始值 
  const isCllooapsed = state.CollApsedReducer.isCllooapsed
  return {
    isCllooapsed
  }
}

const mapDispatchToProps = {
  change_collapsed() {
    return {
      type: "CHANGE_COLLAPSED",
      // data: 8888888888888,
      // payload: 88888888888
    }//action 
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHead))
/*
 connect( mapStateToProps  , mapDispatchToProps )(被包装的组件)
*/
/*
意思为往TopHead扔一个属性a:1
const mapStateToProps = ()=>{
  return {
    a: 1
  }
}
*/